<!--党员学习统计-->
<template>
  <div id="study" class="mui-slider-item mui-control-content mui-active">
    <div class="time-line flex-center time-fixed">
      <div class="message-line"></div>
      <div @click="showTimePicker()" id="recordYyear" class="year-btn flex-center">
        <span id="recordTimes">{{year}}</span>
        <img class="arrow_icon" src="../../../../static/images/select_down.png">
      </div>
      <div class="message-line"></div>
    </div>
    <div id="scroll1" class="mui-scroll-wrapper" style="top: 74px;">
      <div class="mui-scroll record-member-lists">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="go(item)" v-for="item in list">
            <div class="mine-lists-content flex-between-center">
              <div class="statistics-lists">
                <h2 class="organization-lists-title">{{item.partyGroupName}}</h2>
                <div class="organization-lists-time"><span>月度学习计划次数：<b>{{item.shoudStudyNumber}}</b>次，已开展学习次数：<b>{{item.readyStudyNumber}}</b>次</span></div>
              </div>
              <div class="flex-center">
                <p>{{Math.ceil(item.readyStudyNumber/item.shoudStudyNumber*100)}}%</p>
                <span class="mui-icon mui-icon-arrowright"></span>
              </div>
            </div>
          </li>

        </ul>
        <noData v-if="!hasList() && !isLoading"></noData>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import moment from 'moment'
  import loginService from '@/service/loginService'
  export default {
    name: 'statisticsStudyComponent',
    data () {
      return {
        fn: tools,
        list: [],
        data: {},
        isLoading: false,
        year: '',
        _time: ''
      }
    },
    created () {
      this._time = this.$store.state._time || new Date(new Date().getFullYear(), 1, 1)
      this.year = moment(this._time).format('YYYY年MM月')
      this.loadData()
    },
    methods: {
      hasList () {
        if (this.list && this.list.length > 0) {
          return true
        }
        return false
      },
      loadData () {
//         let userInfo = this.$store.state.userInfo
//         let partyGroupId = userInfo.partyMemberModel.partyGroupId
//         let data = {
// //          "isFinished": "string",
//           partyGroupId: partyGroupId,
//           studyMonth: moment(this._time).format('YYYY-MM-DD')
//         }


        let roleType = this.$localStorage.get('roleType')
        let monthId = moment(this._time).format('YYYY-MM-DD')
        let data
        if (this.fn.hasDwbRoleType(roleType)) {
          data = {
            studyMonth: monthId
          }
        } else {
          let userInfo = this.$store.state.userInfo
          let partyGroupId = userInfo.partyMemberModel.partyGroupId
          data = {
            partyGroupId: partyGroupId,
            studyMonth: monthId
          }
        }
        if (this.$store.state.isFinished > -1) {
          data.isFinished = this.$store.state.isFinished
        }
        this.isLoading = true
        loginService.partyMemberStudyStatistics(data).then(res => {
          this.isLoading = false
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.list = res.data
        })
      },
      reloadData () {
        this.loadData()
      },
      go (item) {
        // 保存此条信息
        this.$store.state.studySituationItem = item
        this.$router.push({path: '/studySituation/' + item.monthPlanId})
      },
      showTimePicker () {
        let me = this
        if (!this.datePicker) {
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            columnCount: 2,
            min: new Date(nowYear - 10, 1, 1),
            max: new Date(nowYear + 1, 1, 1),
            value: new Date(nowYear, 1, 1),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.year = moment(selectedTime).format('YYYY年MM月')
              this.$store.state._time = this._time = selectedTime
              this.reloadData()
            }
          })
        }
        this.datePicker.show()
        setTimeout(() => {
          this.datePicker.$updateProps({
            value: me._time
          })
        }, 100)
      }
    }
  }
</script>

<style scoped>
  .time-fixed {top:auto;}
</style>
